<template>
  <view class="detail">
    <!-- <view class="close-box" @tap="goBack">
        <image src="@/assets/imgs/left.svg" class="closes" mode="aspectFill"/>
    </view> -->
    
    <!-- 商品图片 -->
    <swiper
      class="swiper"
      :indicator-dots="true"
      indicator-active-color="#fff"
      indicator-color="rgba(255, 255, 255, 0.5)"
    >
      <swiper-item v-for="(item, index) in goodsImages" :key="index">
        <image :src="item" mode="aspectFill" class="goods-img"></image>
      </swiper-item>
    </swiper>

    <!-- 商品信息 -->
    <view class="goods-info">
      <view class="price">¥{{ price }}</view>
      <view class="title">{{ title }}</view>
    </view>

    <!-- 规格选择 -->
    <view class="spec-section">
      <view class="spec-header" @tap="openSpecPopup">
        <text>选择：{{ selectedSpec }}</text>
        <text class="arrow">></text>
      </view>
    </view>

    <!-- 商品详情 -->
    <view class="detail-section">
      <view class="section-title">详情</view>
      <view class="detail-content">
        <text>{{ description }}</text>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="left">
        <button class="service-btn" @tap="contactService">
          <image src="@/assets/imgs/server.svg" class="icon"></image>
          <text>客服</text>
        </button>
      </view>
      <view class="right">
        <button class="cart-btn" @tap="addToCart">加入购物车</button>
        <button class="buy-btn" @tap="buyNow">立即购买</button>
      </view>
    </view>

    <!-- 规格选择弹窗 -->
    <!-- <nut-popup position="bottom" v-model:visible="showSpecPopup" round>
      <pop/>
    </nut-popup> -->
    <pop
        :goods-images="goodsImages"
        :price="price"
        :specs="specs"
        :selected-spec="selectedSpec"
        v-model:show-spec-popup="showSpecPopup"
        @select-spec="selectSpec"
        @add-to-cart="addToCart"
        @buy-now="buyNow"
      />
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import Taro from "@tarojs/taro";
import pop from "./component/pop.vue";
const pic = "https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg";
// 获取商品ID
const goodsId = ref(0);


Taro.setNavigationBarTitle({
  title: "商品详情",
});

const goBack = () => {
  Taro.navigateBack();
};

onMounted(() => {
  const params = Taro.getCurrentInstance().router?.params;
  if (params?.id) {
    goodsId.value = Number(params.id);
    // TODO: 根据ID获取商品详情
  }
});

// 商品信息
const goodsImages = ref([pic, pic]);
const price = ref(78);
const title = ref("醉义堂品莓果酒");
const description = ref("桂林醉义堂酒业有限公司品莓果酒一盒2支装");

// 规格相关
const specs = ref(["2支装"]);
const selectedSpec = ref("2支装");
const showSpecPopup = ref(false);

// 打开规格选择弹窗
const openSpecPopup = () => {
  showSpecPopup.value = true;
};

// 选择规格
const selectSpec = (spec: string) => {
  selectedSpec.value = spec;
};

// 确认规格选择
const confirmSpec = () => {
  showSpecPopup.value = false;
};

// 联系客服
const contactService = () => {
  // TODO: 实现客服联系功能
};

// 加入购物车
const addToCart = () => {
  // TODO: 实现加入购物车功能
  showSpecPopup.value = true;
};

// 立即购买
const buyNow = () => {
  // TODO: 实现立即购买功能
};
</script>

<style lang="scss">
.detail {
  min-height: 100vh;
  background: #f8f8f8;
  padding-bottom: 120rpx;

  .swiper {
    width: 100%;
    height: 750rpx;

    .goods-img {
      width: 100%;
      height: 100%;
    }
  }

  .goods-info {
    background: #fff;
    padding: 20rpx;
    margin-bottom: 20rpx;

    .price {
      font-size: 40rpx;
      color: #ff0000;
      font-weight: bold;
    }

    .title {
      font-size: 32rpx;
      color: #333;
      margin-top: 10rpx;
    }
  }

  .spec-section {
    background: #fff;
    padding: 20rpx;
    margin-bottom: 20rpx;

    .spec-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
      color: #333;

      .arrow {
        color: #999;
      }
    }
  }

  .detail-section {
    background: #fff;
    padding: 20rpx;

    .section-title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .detail-content {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
    }
  }

  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100rpx;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

    .left {
      .service-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: none;
        padding: 0;
        line-height: 1;

        .icon {
          width: 40rpx;
          height: 40rpx;
          margin-bottom: 6rpx;
        }

        text {
          font-size: 24rpx;
          color: #666;
        }
      }
    }

    .right {
      width: 400rpx;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      button {
        height: 80rpx;
        line-height: 80rpx;
        padding: 0 40rpx;
        font-size: 28rpx;
        border-radius: 40rpx;
      }

      .cart-btn {
        border-radius: 32rpx 0 0 32rpx;
        background: #ffe4e4;
        color: #ff0000;
        margin-top: 0;
      }

      .buy-btn {
        border-radius: 0 32rpx 32rpx 0;
        background: #ff0000;
        color: #fff;
        margin-top: 0;
      }
    }
  }

  .spec-popup {
    .popup-header {
      padding: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      border-bottom: 1rpx solid #f5f5f5;

      .goods-info {
        display: flex;
        gap: 20rpx;

        .thumb {
          width: 160rpx;
          height: 160rpx;
          border-radius: 12rpx;
        }

        .info {
          .price {
            font-size: 36rpx;
            color: #ff0000;
            font-weight: bold;
          }

          .selected {
            font-size: 26rpx;
            color: #999;
            margin-top: 10rpx;
          }
        }
      }

      .close {
        font-size: 48rpx;
        color: #999;
        line-height: 1;
      }
    }

    .spec-list {
      padding: 20rpx;

      .spec-title {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 20rpx;
      }

      .spec-items {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;

        .spec-item {
          padding: 10rpx 30rpx;
          border: 1rpx solid #ddd;
          border-radius: 30rpx;
          font-size: 26rpx;
          color: #333;

          &.active {
            background: #fff4f4;
            border-color: #ff0000;
            color: #ff0000;
          }
        }
      }
    }

    .popup-footer {
      padding: 20rpx;
      border-top: 1rpx solid #f5f5f5;

      .confirm-btn {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        background: #ff0000;
        color: #fff;
        font-size: 28rpx;
        border-radius: 40rpx;
      }
    }
  }
}

.close-box{
    position: fixed;
    left: 30rpx;
    top: 30rpx;
    z-index: 999;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    display: flex;
    justify-content: center;
    align-items: center;
    .closes{
        width: 100%;
        height: 40%;
    }
}
</style>
